import { useState, useEffect, useRef } from 'react';
import { Button, NavBar, Input, ActionSheet } from 'antd-mobile';
import { AddOutline } from 'antd-mobile-icons';
import type { Action } from 'antd-mobile/es/components/action-sheet';
import { history, useLocation } from 'umi';
import './index.less';
import 'lib-flexible';
import '@/pages/golobo.less';

const socket = new WebSocket(
  'ws://localhost:8080/socket/?user_id=' + '646c6d787ab631ba823a7790',
);

export default function IndexCustomer(props: any) {
  const userInfo = props.location.state;

  useEffect(() => {
    // 连接服务端
    socket.onopen = (e) => {
      console.log('WebSocket 连接已打开');
    };

    // 接收服务端的消息后显示
    socket.onmessage = (e) => {
      let serveData = JSON.parse(e.data);

      // console.log(serveData);

      let showMsg = document.getElementById('showMsg');

      let li = document.createElement('li');
      li.className = 'customer';
      li.innerHTML = `
            <img src=${serveData.img} alt="" />
            <span>${serveData.message}</span>
          `;
      showMsg.appendChild(li);
    };
  }, []);

  const sendValue = useRef(null);

  // 发送消息
  const sendMessage = () => {
    if (sendValue.current.nativeElement.value === '') return;

    let sendMsg = {
      type: 4,
      img: userInfo.img,
      message: sendValue.current.nativeElement.value,
      role: 'clienter',
    };

    let showMsg = document.getElementById('showMsg');

    let li = document.createElement('li');
    li.className = 'clienter';

    li.innerHTML = `
        <img src=${sendMsg.img} alt="" />
        <span>${sendMsg.message}</span>
        `;
    showMsg.appendChild(li);

    sendValue.current.nativeElement.value = '';
    socket.send(JSON.stringify(sendMsg));
  };

  // 快捷发送
  const easySend = (action: any) => {
    let sendMsg = {
      type: action.key,
      img: userInfo.img,
      message: action.text,
      role: 'clienter',
    };

    let showMsg = document.getElementById('showMsg');

    let li = document.createElement('li');
    li.className = 'clienter';

    li.innerHTML = `
        <img src=${sendMsg.img} alt="" />
        <span>${sendMsg.message}</span>
      `;
    showMsg.appendChild(li);

    socket.send(JSON.stringify(sendMsg));
    sendValue.current.nativeElement.value = '';
    setVisible(false);
  };

  const actions: Action[] = [
    {
      key: 1,
      text: '何时出票',
    },
    {
      key: 2,
      text: '办理退票',
    },
    {
      key: 3,
      text: '转人工服务',
    },
  ];

  const [visible, setVisible] = useState(false);

  return (
    <div className="customer-box">
      <NavBar
        style={{
          backgroundColor: '#fb3777',
          color: '#fff',
          '--height': '36px',
          '--border-bottom': '1px #eee solid',
        }}
        onBack={() => {
          history.push({
            pathname: '/mine',
          });
        }}
      >
        我的客服
      </NavBar>
      <ul id="showMsg"></ul>
      <div className="sendBox">
        <Input placeholder="请输入内容" ref={sendValue} />
        <Button
          onClick={sendMessage}
          size="middle"
          style={{
            '--background-color': '#fb3777',
            '--text-color': '#fff',
          }}
        >
          发送
        </Button>

        <Button
          size="middle"
          onClick={() => setVisible(true)}
          style={{
            width: '50px',
            '--background-color': 'plum',
            '--text-color': '#fff',
          }}
        >
          <AddOutline />
        </Button>
        <ActionSheet
          visible={visible}
          actions={actions}
          onClose={() => setVisible(false)}
          onAction={(action) => {
            easySend(action);
          }}
        />
      </div>
    </div>
  );
}
